
//新增用户
$("#add").on("click",function(){

    //复制第一行 添加到最后一行之后
    var tr = $("#tb tr").eq(0).clone();
    tr.appendTo("#tb");
    lineColor();
    
   
    //工号  当前表格最大工号+1
    var maxVal = 0;
    for(var i =0; i< $("#tb tr").length;i++){
        var val = $("#tb").find("tr:eq("+i+")").find("td:eq(1)").text();
        if(maxVal - val < 0){
            maxVal = val;
        }    
    }
    $("tr:last").children("td:eq(1)").html("<td>"+(Number(maxVal)+1)+"</td>")

     //姓名
     $("tr:last").children("td:eq(2)").html("<td>"+
     "<input onkeyup=\"value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')\"" +
     "onbeforepaste=\"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,''))\""+
     "maxlength=\"10\" placeholder=\"不超过10个字符\" value = \"null\"></td>)");
 
     //性别
     $("tr:last").children("td:eq(3)").html("<td><select><option>男</option><option>女</option></select></td>");
 
     //密码
     $("tr:last").children("td:eq(4)").html("<td>"+
     "<input onkeyup=\"this.value=this.value.replace(/\\D/g,'')\""
     +"onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" maxlength=\"4\" placeholder=\"4位数字\" value = \"1234\"></td>");
 
     //年龄
     $("tr:last").children("td:eq(5)").html("<td></td>");
 
     //出生日期
     $("tr:last").children("td:eq(6)").html("<td><input"+" type=date"+"></td>");

     $("button").attr("disabled", true);//当前操作下，除了新生成的临时按钮外其他按钮实效
    getSaveBtn().insertAfter($("tr:last").children("td:eq(7)"));

});


//删除用户通过选定的序号
$("#del").click(function(){
  
    if($("input:checked").length>0){//判断是否选择序号，若没有弹窗给出提示

        if(confirm("是否删除？")){   //询问用户是否删除
        $("input:checked").each(function(){
            $(this).parents("tr").remove();
        })

        lineColor();
        }
    }else{
        alert("请选择序号！")
    }
});

//编辑用户信息
$("#update").click(function(){

    if($("input:checked").length>0){//判断是否选择序号，若没有弹窗给出提示
        $("input:checked").each(function(){
            //姓名 使用正则表达式规定格式
            let name =  $(this).parents("tr").children("td:eq(2)").text();
            $(this).parents("tr").children("td:eq(2)").html("<td>"+
            "<input onkeyup=\"value=value.replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'')\"" +
            "onbeforepaste=\"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,''))\""+
            "maxlength=\"10\" placeholder=\"不超过10个字符\" value="+name+"></td>)");

            //性别
            let sex =  $(this).parents("tr").children("td:eq(3)").text();
            if(sex == "男"){
                $(this).parents("tr").children("td:eq(3)").html("<td><select><option selected=\"selected\">男</option><option>女</option></select></td>");
            }else if(sex == "女"){
                $(this).parents("tr").children("td:eq(3)").html("<td><select><option>男</option><option selected=\"selected\">女</option></select></td>");
            }
            
            //密码
            let pwd = $(this).parents("tr").children("td:eq(4)").text();
            $(this).parents("tr").children("td:eq(4)").html("<td>"+
            "<input onkeyup=\"this.value=this.value.replace(/\\D/g,'')\""
            +"onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" maxlength=\"4\" placeholder=\"4位数字\"  value = "+pwd+"></td>");
            

            //年龄
            let age = $(this).parents("tr").children("td:eq(5)").text();
            $(this).parents("tr").children("td:eq(5)").html("<td>"+age+"</td>");

            //出生日期
            var bDay = $(this).parents("tr").children("td:eq(6)").text();
            $(this).parents("tr").children("td:eq(6)").html("<td><input"+" type=date"+" value = "+bDay+"></td>");

            $("button").attr("disabled", true);//当前操作下，除了新生成的临时按钮外其他按钮实效
            getSaveBtn().insertAfter($(this).parents("tr").children("td:last"));
        })
    }else{
    alert("请选择序号！")
    }   
})

   
$('#query').on('click', function() {

    if(($('#querybyid').val().length>0) && ($('#querybyname').val().length>0)){
        alert("请选择工号或者姓名进行查询！")
    }else if($('#querybyid').val().length>0){
            $("button").attr("disabled", true);//当前操作下，除了新生成的临时按钮外其他按钮实效
            getBackBtn().insertBefore("table");
            $('table tbody tr').hide()
                .filter(":contains('" + ($('#querybyid').val()) + "')").show();
    }else if($('#querybyname').val().length>0){
            $("button").attr("disabled", true);//当前操作下，除了新生成的临时按钮外其他按钮实效
            getBackBtn().insertBefore("table");
            $('table tbody tr').hide()
                .filter(":contains('" + ($('#querybyname').val()) + "')").show();
    }else{
        alert("请选择工号或者姓名进行查询！")
    }
})



//动态绑定    保存操作结果
$("body").on("click","#save",function(){

    //获取输入的日期的字符串
    //编辑状态下不修改日期返回原来的日期
    var date = $(this).parents("tr").children("td:eq(6)").find("input").val();
    if(date.length == 0){
        date = $("input[type='date']").attr("value");
    }
    //日期相关
    var now = new Date();//系统当前日期
    var dateInput = new Date(date);//用户输入日期
    var day = dateInput.getDate();//日
    var month =(dateInput.getMonth() + 1);//月
    var age = (now.getFullYear())  - (dateInput.getFullYear());//年龄
    var birthday = dateInput.getFullYear()+"-"+(month)+"-"+(day) ;//生日 //转换为指定格式yyyy-MM-dd,不补0

    //获取用户输入姓名、性别、密码
    var name = $(this).parents("tr").children("td:eq(2)").find("input").val();
    var sex = $(this).parents("tr").children("td:eq(3)").find("select").val();
    var pwd = $(this).parents("tr").children("td:eq(4)").find("input").val();  

    //判断用户是否大于18岁 
    if((age >= 18) &&(dateInput.getMonth() < now.getMonth()) && (day < now.getDate())){

        if(name.length == 0){
            name = $(this).parents("tr").children("td:eq(2)").find("input").attr("value");
        }

        if(pwd.length == 0){
            name = $(this).parents("tr").children("td:eq(3)").find("input").attr("value");
        }else if(confirm("是否保存？")){  
            
            $(this).parents("tr").children("td:eq(2)").html("<td>"+name+"</td>");            
            $(this).parents("tr").children("td:eq(3)").html("<td>"+sex+"</td>");
            $(this).parents("tr").children("td:eq(4)").html("<td>"+pwd+"</td>");
            $(this).parents("tr").children("td:eq(5)").html("<td>"+age+"</td>");
            $(this).parents("tr").children("td:eq(6)").html("<td>" + birthday +" </td>");

            removeSaveBtn();
        }
    }else{
        alert("请输入正确的年龄!")
    }

})

//动态绑定    返回主页面
$("body").on("click","#back",function(){
    $('table tbody tr').show();
    removeBackBtn();
    $("button").attr("disabled", false);
})


//自定义方法控制 偶数列颜色为info 奇数列为warning
function lineColor(){
    
    var larr = $("#tb tr").length;
        //修改删除后的行颜色
    for(var i = 0;i < larr;i++){
        if(i%2==0){
        $("#tb tr:eq("+i+")").attr("class","info");
        }else{
            $("#tb tr:eq("+i+")").attr("class","warning");
       }
   }
}


//动态创建按钮
function getSaveBtn(){
    var newBtn = $("<button id=\"save\" class=\"btn btn-success\" style=\"margin-left: -20mm;\">保存</button>");
    return newBtn;
}

//动态删除临时按钮，还原失效按钮
function removeSaveBtn(){

    $("#save").remove();
    $("button").attr("disabled", false);
}

function getBackBtn(){
    var Btn = $("<button id="+"back"+" class="+"\"btn btn-success\" >返回</button>");
    return Btn;   
}

//动态删除临时按钮，还原失效按钮
function removeBackBtn(){
    $("#back").remove();
    $("button").attr("disabled", false);
}


